import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { QueryService } from "src/app/service/query.service";
import { ProvinceType } from "src/app/model/province.type";
import { CityType } from "src/app/model/city.type";
import { DistrictType } from "src/app/model/district.type";
import { MapBase } from "src/app/map/map-base";
import { Point } from "src/app/map/point";
import { MapDraw } from "src/app/map/map-draw";
import { MapWrap } from "src/app/map/map-wrap";
import { Feature } from "ol";

@Component({
	selector: 'app-container',
	templateUrl: './container.component.html',
	styleUrls: ['./container.component.less'],
	providers: [QueryService]
})
export class ContainerComponent implements OnInit {

	@ViewChild('map', { static: true }) mapEleRef!: ElementRef<HTMLDivElement>;

	private mapBase!: MapBase;

	provinceLoading: boolean = false;
	provinceList: Array<ProvinceType> = [];
	provinceValue: string = '100000';

	cityLoading: boolean = false;
	cityList: Array<CityType> = [];
	cityValue: string | null = null;

	districtLoading: boolean = false;
	districtList: Array<DistrictType> = [];
	districtValue: string | null = null;

	areaLoading: boolean = false;

	constructor(
		private queryService: QueryService,
	) {
	}

	ngOnInit(): void {
		this.mapBase = new MapBase(this.mapEleRef.nativeElement);
		this.getProvinceList();
	}

	getProvinceList(): void {
		// 重置
		this.provinceList = [];
		this.provinceValue = '100000';
		this.cityList = [];
		this.cityValue = null;
		this.districtList = [];
		this.districtValue = null;
		// 查询
		this.provinceLoading = true;
		this.queryService.getAllProvinces().then((res) => {
			this.provinceLoading = false;
			this.provinceList = res.data;
		});
	}

	getCityList(adcode: string): void {
		// 重置
		this.cityList = [];
		this.cityValue = null;
		this.districtList = [];
		this.districtValue = null;
		// 查询
		this.cityLoading = true;
		this.queryService.getCitiesByProvinceAdcode({ adcode: adcode }).then((res) => {
			this.cityLoading = false;
			this.cityList = res.data;
		});
	}

	getDistrictList(adcode: string): void {
		// 重置
		this.districtList = [];
		this.districtValue = null;
		// 查询
		this.districtLoading = true;
		this.queryService.getDistrictsByCityAdcode({ adcode: adcode }).then((res) => {
			this.districtLoading = false;
			this.districtList = res.data;
		});
	}

	showAreaOnMap(): void {
		let adcode = this.districtValue || this.cityValue || this.provinceValue;
		this.areaLoading = true;
		setTimeout(() => {
			this.queryService.getAreaByAdcode({ adcode: adcode }).then((res) => {
				this.areaLoading = false;
				this.draw(res.data.polyline)
			});
		}, 500);
	}

	draw(polyline: string): void {
		MapWrap.removeAllFeatures(this.mapBase, this.mapBase.drawLayerName);
		let features: Array<Feature> = [];
		let blocks = polyline.split('|');
		blocks.forEach((block) => {
			let points = block.split(';');
			let polygon: Array<Point> = [];
			points.forEach((point) => {
				let p = point.split(',');
				polygon.push(new Point(Number(p[0]), Number(p[1])));
			});
			let feature = MapDraw.createPolygonFeature(polygon);
			features.push(feature);
			MapWrap.addFeature(this.mapBase, this.mapBase.drawLayerName, feature);
		});
		MapWrap.setFitViewByFeatures({
			map: this.mapBase,
			features: features,
			padding: [32, 32, 32, 32]
		});
	}

}